<template>
   <div class='search-popup'>
       <van-search
            v-model="value"
            show-action
            :placeholder="placeholderVal"
            @search="onSearch"
            @cancel="onCancel"
            @input ="onValue"
        />
        <HistoryHot v-if="blockShow==1" :historyKeywordList="historyKeywordList"
        :hotKeywordList="hotKeywordList" @tagClick="tagClick" @clearDelete="clearDelete"></HistoryHot>
        <SearchTipsList  v-else-if="blockShow==2" :searchTipsList="searchTipsList"
         @tagClick="tagClick" ></SearchTipsList>
        <SearchProducts v-else :goodsList="goodsList" :filterCategory="filterCategory"
        @categoryChange="categoryChange" @priceChange="priceChange"
        ></SearchProducts>
   </div>
</template>

<script>
import {getSearchPopupData,getSearchTispData,getGoodsList,clearHistory} from "@/request/api"
import HistoryHot from '@/components/HistoryHot.vue'
import SearchTipsList from '@/components/SearchTipsList.vue'
import SearchProducts from '@/components/SearchProducts.vue'
export default {
  data() {
    return {
      value: '',
      placeholderVal:'',
      blockShow:1,
      historyKeywordList:[],
      hotKeywordList:[],
      searchTipsList:[],
      filterCategory:[],
      goodsList:[],
      // 价格由高到低
      order:"desc",
      // 分类id
      categoryId:0,
      // 默认搜索方式
      sort:"id",
    };
  },
  created(){
    
    getSearchPopupData()
    .then(res=>{
      console.log(res)
      this.placeholderVal = res.data.defaultKeyword.keyword
      this.historyKeywordList = res.data.historyKeywordList
      this.hotKeywordList = res.data.hotKeywordList
    })
    .catch(err=>{
      console.log(err)
    })
  },
  methods: {
    clearDelete(){
      clearHistory()
      .then(res=>{
        this.$toast('删除成功');
      })
      .catch(err=>{

      })
    },
    tagClick(val){
      this.value = val
      this.onSearch(val)
    },
    priceChange(val){
      this.order = val
      this.sort = "price"
      this.onSearch(this.value)
    },
    categoryChange(val){
      console.log(val)
      this.categoryId = val
      this.onSearch(this.value)
    },
    // 回车确定
    onSearch(val) {
      this.blockShow = 3

      getGoodsList({
        keyword:val,
        page:1,
        size:10,
        order:this.order,
        categoryId:this.categoryId,
        sort:this.sort
        })
      .then(res=>{
        console.log(res)
        // 替换数组keyname，需要先进行深拷贝
        let arrays = res.data.filterCategory;
        let newArrays = JSON.parse(JSON.stringify(arrays).replace(/name/g,'text').replace(/id/g,'value'))
        this.filterCategory = newArrays
        console.log(newArrays)
        this.goodsList = res.data.goodsList

      })
      .catch(err=>{
        console.log(err)
      })

    },
    onCancel() {
      this.$store.commit("changeIsShowShadow",false)
      this.$router.go(-1)
    },
    onValue(val){
      if(val == ""){
         return this.blockShow = 1;

      }
      this.blockShow = 2
      getSearchTispData({keyword:val})
      .then(res=>{
        console.log(res)
        this.searchTipsList = res.data
      })
      .catch(err=>{
        console.log(err)
      })
    }
  },
  components:{
    HistoryHot,
    SearchTipsList,
    SearchProducts
  }
};
</script>
<style lang="less" scoped>
    .search-popup{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        background: #dedede;
        overflow-y: scroll;
        z-index: 99;
    }
</style>